import React from 'react';
import styles from './index.less';
import { CaretUpOutlined, CaretDownOutlined } from '#/utils/antdIcons';
import img1 from '@/assets/datang/img_socket.png';
import img2 from '@/assets/datang/img_flash.png';

export default ({ dataSource }) => {
  const fmtNum = (v) => {
    if (!v) return 0;
    return v.toFixed(2);
  };

  const fmtRatio = (v) => {
    if (!v) return 0;
    return (v * 100).toFixed(1);
  };

  const _rendItem = ({ title, icon, value, ratio }) => {
    const increase = ratio > 0;
    return (
      <div className={styles.cell_item}>
        <img src={icon} className={styles.img} />
        <div className={styles.power_box}>
          <div className={styles.title}>{title}</div>
          <div className={styles.power}>{value}</div>
        </div>
        <div className={styles.compare}>
          <div className={styles.text}>同比</div>
          <div className={`${styles.ratio} ${increase ? styles.up : styles.down}`}>
            {increase ? (
              <CaretUpOutlined className={styles.icon} />
            ) : (
              <CaretDownOutlined className={styles.icon} />
            )}
            {ratio}%
          </div>
        </div>
      </div>
    );
  };
  return (
    <div className={styles.cell}>
      {_rendItem({
        title: '全省用电统计',
        icon: img1,
        value: fmtNum(dataSource?.wholeSocietyElec),
        ratio: fmtRatio(dataSource?.elecYoY),
      })}
      {_rendItem({
        title: '全省发电量',
        icon: img2,
        value: fmtNum(dataSource?.elecQuantity),
        ratio: fmtRatio(dataSource?.yoy),
      })}
    </div>
  );
};
